<template>
	<view class="container">
		<!-- 头部导航栏 -->
		<view class="header">
		</view>
		
		<!-- 成功内容区域 -->
		<view class="success-content">
			<!-- 成功图标 -->
			<view class="success-icon">
				<view class="icon-circle">
					<text class="checkmark">✓</text>
				</view>
			</view>
			
			<!-- 成功文字 -->
			<view class="success-text">
				<text class="main-text">添加成功</text>
			</view>
			
			<!-- 返回按钮 -->
			<view class="return-button" @click="returnToVehicleList">
				<text class="return-text">返回</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			// 页面加载时自动添加车辆数据到列表
			this.addVehicleToList();
		},
		methods: {
			returnToVehicleList() {
				// 跳转到我的车辆页面
				uni.redirectTo({
					url: '/pages/my/mycar/mycar'
				});
			},
			
			// 添加车辆到列表
			addVehicleToList() {
				// 获取传递的车辆数据
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2]; // 获取添加车辆页面
				
				if (prevPage && prevPage.$vm && prevPage.$vm.formData) {
					const vehicleData = prevPage.$vm.formData;
					
					// 创建新的车辆对象
					const newVehicle = {
						id: Date.now(), // 使用时间戳作为ID
						model: vehicleData.vehicleModel,
						plate: vehicleData.plateNumber,
						image: vehicleData.photo,
						isDefault: false // 新添加的车辆默认不是默认车辆
					};
					
					// 获取车辆列表页面并添加新车辆
					const vehicleListPage = pages[pages.length - 3]; // 获取车辆列表页面
					if (vehicleListPage && vehicleListPage.$vm) {
						vehicleListPage.$vm.vehicleList.push(newVehicle);
						
						// 显示成功提示
						uni.showToast({
							title: '车辆添加成功',
							icon: 'success'
						});
					}
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f0f2f5;
		display: flex;
		flex-direction: column;
	}
	
	/* 头部样式 */
	.header {
		height: 0;
		background-color: #1976d2;
		position: relative;
		z-index: 100;
	}
	
	/* 成功内容区域 */
	.success-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 40rpx;
		background-color: white;
		margin: 20rpx;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	}
	
	/* 成功图标 */
	.success-icon {
		margin-bottom: 60rpx;
		animation: iconBounce 0.8s ease-out;
	}
	
	.icon-circle {
		width: 200rpx;
		height: 200rpx;
		background: linear-gradient(135deg, #1976d2, #1565c0);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 12rpx 40rpx rgba(25, 118, 210, 0.3);
		position: relative;
		overflow: hidden;
	}
	
	.icon-circle::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
		animation: iconShine 2s ease-in-out infinite;
	}
	
	.checkmark {
		color: white;
		font-size: 100rpx;
		font-weight: bold;
		line-height: 1;
		animation: checkmarkDraw 0.6s ease-out 0.3s both;
	}
	
	/* 成功文字 */
	.success-text {
		margin-bottom: 80rpx;
		text-align: center;
		animation: textFadeIn 0.8s ease-out 0.5s both;
	}
	
	.main-text {
		font-size: 48rpx;
		color: #333;
		font-weight: 600;
		letter-spacing: 2rpx;
	}
	
	/* 返回按钮 */
	.return-button {
		width: 300rpx;
		height: 88rpx;
		background: linear-gradient(135deg, #1976d2, #1565c0);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(25, 118, 210, 0.3);
		position: relative;
		overflow: hidden;
		animation: buttonSlideUp 0.8s ease-out 0.7s both;
	}
	
	.return-button::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s ease;
	}
	
	.return-button:active::before {
		left: 100%;
	}
	
	.return-button:active {
		transform: scale(0.98);
		box-shadow: 0 6rpx 20rpx rgba(25, 118, 210, 0.4);
	}
	
	.return-text {
		color: white;
		font-size: 32rpx;
		font-weight: 500;
	}
	
	/* 动画效果 */
	@keyframes iconBounce {
		0% {
			transform: scale(0);
			opacity: 0;
		}
		50% {
			transform: scale(1.1);
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}
	
	@keyframes iconShine {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	
	@keyframes checkmarkDraw {
		0% {
			transform: scale(0);
			opacity: 0;
		}
		50% {
			transform: scale(1.2);
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}
	
	@keyframes textFadeIn {
		0% {
			opacity: 0;
			transform: translateY(20rpx);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes buttonSlideUp {
		0% {
			opacity: 0;
			transform: translateY(40rpx);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>
